<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
 <style>
        div{
            width: 400px;
            height:260px;
            background-color: #eee;
            margin: 0 auto;
        }
       textarea{
           margin: 20px;
       } 
      textarea:focus{
          outline: none;
          border: 1px solid orange;
      }
       span{
           color: #aaa;
           font-size: 20px;
           /* float: right; */
           display: none;
       }
    </style>
</head>
<body>
 <div>
      <span>已输入<strong style="color:#000;">0</strong>个字</span>
     <textarea cols="50" rows="5"></textarea><br>
    
 </div>
    <script src="../jquery.js"></script>
</body>
<html>
<script>
$(function(){
var maxlength=0;

$('textarea').keyup(function(index){
    var l=$(this).val().length; //输入的字符串个数
     
    console.log(l);
    // $('textarea').each(function(){
    // if($('textarea').val().charCodeAt(0) > 255){
    //     l=l+1
    // }else{  
    //     l=l+0.5
    // }
   
// })
 $("strong").text(maxlength+l);
    if(l>0){
        $('span').css('display','block') 
    }
    if(l>140){
        $('span').find('strong').css('color','red')
    }else{
         $('span').find('strong').css('color','#000')
    }
})
})


    
</script>